<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Documento sin titulo</title>
        <style type="text/css">
            <!--
            body { background:url(images/Background.jpg) no-repeat center;}
            .bloque {
                background:url(images/transp.png);
                height: 420px;
                width: 800px;
                margin: 30px auto;
                border: 1px solid #999;
                padding: 20px;
                position: relative;
                border-radius: 8px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
            .hora {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: #F00;
                padding: 5px;
                height: 110px;
                width: 200px;
                position: absolute;
                top: 103px;
                right: 55px;
                background-color: #000;
                text-align: center;
                margin: 0px;
                border-radius: 8px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border: 2px solid #FFF;
            }
            .arrow {
                background-image: url(images/arrow.png);
                background-repeat: no-repeat;
                height: 100px;
                width: 180px;
                top: 250px;
                right: 273px;
                position:absolute;
                padding-top: 78px;
                padding-right: 8px;
                padding-bottom: 8px;
                padding-left: 8px;
            }
            .estado {
                padding: 12px;
                border: 3px solid #060;
                font-family: Verdana, Geneva, sans-serif;
                font-size: 16px;
                font-weight: bold;
                color: #090;
                border-radius: 8px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;

            }
            .numero {
                font-size: 36px;
                font-weight: bold;
            }
            .formulario {
                height: 400px;
                width: 100%;
            }
            .datos_left {
                font-family: Verdana, Geneva, sans-serif;
                font-size: 14px;
                float: left;
                width: 320px;
                padding-top: 20px;
                padding-right: 10px;
                padding-bottom: 10px;
                padding-left: 10px;
            }
            .datos_right {
                width: 200px;
                float: right;
                padding-top: 215px;
            }
            h2 {
                font-family: Verdana, Geneva, sans-serif;
                font-size: 14px;
                padding: 0px;
				margin:3px 0;
            }
            .bloque h1 {
                font-family: Verdana, Geneva, sans-serif;
                margin-top: 5px;
                margin-right: auto;
                margin-bottom: 0px;
                margin-left: 0px;
                text-align: center;
                width: auto;
            } 
            .datos {
                border:1px solid #666;
                padding:8px;
                font:Verdana, Geneva, sans-serif;
                font-size:24px;
                width:300px;
            }
            #buscar{
                background:url(images/buscar.png) no-repeat;
                width:60px;
                height:60px;
                border:0px;
                cursor:pointer;
                position:absolute;
                top: 134px;
                left: 380px;
            }
            #enviar{
                background:url(images/enviar.png) no-repeat;
                width:310px;
                height:80px;
                border:0px;
                cursor:pointer;
                position:absolute;
                top: 329px;
                left: 33px;
                color:#FFF;
                font:Verdana, Geneva, sans-serif;
                font-size:22px;
                font-weight:bold;
            }
            -->
        </style>
        <script>
<?php date_default_timezone_set("America/Lima"); ?>
    window.onload=hora; 
    fecha = new Date("<? echo date("d M Y G:i:s"); ?>");
    var dia=fecha.getUTCDate();
    if (dia<10){dia="0"+dia;}
    var mes=fecha.getMonth()+1;
    var anio=fecha.getFullYear();
    var diaarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
    var mesarray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
    function hora(){ 
        var hora=fecha.getHours();
        var minutos=fecha.getMinutes(); 
        var segundos=fecha.getSeconds();
        if(hora<10){ hora='0'+hora;} 
        if(minutos<10){minutos='0'+minutos; } 
        if(segundos<10){ segundos='0'+segundos; } 
        fech=hora+":"+minutos+":"+segundos; 
        document.getElementById('hora').innerHTML=fech;
        fecha.setSeconds(fecha.getSeconds()+1); setTimeout("hora()",1000); }
        </script>
    </head>
    <script src="js/jquery-1.5.js" language="javascript"></script>
    <script language="javascript">
        function Busca_codigo(){
            var codi_doce=$("#codigo_docente").val();
            var variable_post=codi_doce;
            /// Invocamos a nuestro script PHP
            $.post("Consultar_docentes.php?id="+fech+"&id2="+diaarray[fecha.getDay()], { variable: variable_post }, function(data){
                /// Ponemos la respuesta de nuestro script en el DIV recargado
                $("#estado_docente_asis").html(data);
            });
        }
        function Ingresa_sale(){
            var objeto=document.getElementById("codigo_docente").value;
            alert(objeto);
        }
    </script>
    <body>
        <div class="bloque">
            <form action="index.php" method="post">
                <div class="hora">
                    <h2>Hoy es:</h2>
                    <script>
                        document.write(diaarray[fecha.getDay()]+" "+dia+" de "+mesarray[mes-1]+" del "+anio+"<br>");
                    </script>
                    <h2>Hora Actual</h2>
                    <div class="numero">
                        <div id="hora">
                        </div>
                    </div>
                </div>
                <input name="Buscar" type="button" id="buscar" onclick="Busca_codigo()"/>
                <input name="Enviar" type="submit" id="enviar" value="Ingresar / Salir" onclick="Ingresa_sale()"/>
                <div class="arrow">
                    <div class="estado">- ASISTIO<br />
                        -
                        TARDE<br />
                        - FALTO
                    </div>

                </div>
                <h1>Ingreso al Sistema</h1>
                <div class="formulario">
                    <div class="datos_left">
                        <h2>Ingrese su codigo </h2>
                        <input name="codigo_docente" id="codigo_docente" class="datos" type="text" size="10" maxlength="12" />
                        <h2>Horario disponible</h2>
                        <div id="estado_docente_asis">
                            <input name="estado_docente" id="estado_docente" class="datos" type="text" size="10" maxlength="12" disabled="disabled" />                           
                        </div>
                    </div>
                    <div class="datos_right"><img src="images/user.png" width="128" height="128" /></div>
            </form>
        </div>
        </div>
    </body>
</html>